<template>
    <div class="form-wrapper">
        <div class="card">
            <el-tag size="mini" class="dark-tag" :color="this.nodeColor">节点</el-tag>
            <span> {{nodeData.label}}</span>
        </div>
        <el-divider class="divider-style"><i class="el-icon-edit"></i></el-divider>
        <el-collapse class="form" accordion>
            <el-collapse-item title="新建关系">
                <el-form>
                    <el-form-item>
                        <el-input class="form-item-style" placeholder="输入关系名称" v-model="edgeName">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select class="form-item-style" placeholder="选择线条样式" v-model="edgeStyle">
                            <el-option v-for="item in edgeStyleList"
                                       :key="item.key"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="form-item-style" type="primary" @click="createEdge">
                            选择连接点<i class="el-icon-eleme"></i>
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="编辑节点">
                <el-form>
                    <el-form-item>
                        <el-input class="input-with-button" :placeholder="'名称:'+nodeData.label" v-model="nodeName"
                                  @keypress.native.enter="modifyNodeName">
                        </el-input>
                        <el-button class="button-in-input" @click="modifyNodeName">
                            <i class="el-icon-edit"></i>
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-select class="input-with-button" placeholder="修改节点类型" v-model="nodeStyle">
                            <el-option v-for="item in nodeStyleList"
                                       :key="item.key"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button class="button-in-input" type="primary" @click="modifyNodeStyle">
                            <i class="el-icon-edit"></i>
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-tag class="tag-in-input" type="plain">节点大小</el-tag>
                        <el-input-number class="input-with-tag" v-model="nodeData.r" controls-position="right"
                                         size="small"
                                         @change="changeNodeSize"
                                         :min="1" :max="50">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item>
                        <el-tag class="tag-in-input" type="plain">标签大小</el-tag>
                        <el-input-number class="input-with-tag" v-model="nodeLabel"
                                         controls-position="right"
                                         size="small"
                                         @change="changeNodeLabel"
                                         :min="1" :max="50">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="textarea" class="form-item-style"
                                  v-model="nodeData.content">
                        </el-input>
                        <div class="relative-wrapper">
                            <el-button class="edit-button"
                                       @click="modifyNodeContent"
                                       type="primary"
                                       icon="el-icon-edit"
                                       circle></el-button>
                        </div>
                    </el-form-item>
                    <el-form-item v-if="nodeData.type===4">
                        <el-button class="form-item-style" @click="modifyNodeImage">
                            修改节点图片
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="删除节点">
                <el-button class="form-item-style" type="danger" @click="deleteNode">
                    删除节点<i class="el-icon-delete"></i>
                </el-button>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    import d3ClassGetter from "../../assets/javascript/d3ClassGetter";
    import global from "../../store/global";
    import {mapActions} from "vuex";

    export default {
        name: "nodeForm",
        inject: ["reload1"],
        data() {
            return {
                nodeName: "",
                nodeColor: "#409EFF",
                nodeStyle: "",
                nodeContent: "",
                edgeName: "",
                edgeColor: "#409EFF",
                edgeStyle: "",
                edgeStyleList: d3ClassGetter.edgeStyleList,
                nodeStyleList: d3ClassGetter.nodeStyleList,
                nodeLabel: 12
            };
        },
        props: {
            nodeData: {
                type: Object,
                default: null
            },
            nodeMethods: {
                type: Object,
                default: null
            }
        },
        methods: {
            ...mapActions([
                "uploadNodeImage"
            ]),
            createEdge() {
                this.nodeMethods.addEdge(this.edgeName, this.edgeStyle);
                console.log(this.nodeData);
            },
            modifyNodeName() {
                this.nodeMethods.modifyNodeName(this.nodeName);
                this.nodeName = "";
            },
            modifyNodeImage() {
                global.uploadFile2([this.$route.params.graphId, this.nodeData.id], "image/*", this.uploadNodeImage);
                setTimeout(() => {
                    this.reload1();
                }, 5000);
            },
            modifyNodeStyle() {
                this.nodeMethods.modifyNodeType(this.nodeStyle);
            },
            modifyNodeContent() {
                this.nodeMethods.modifyNodeContent(this.nodeData.content);
            },
            changeNodeSize() {
                this.nodeMethods.changeNodeSize();
            },
            changeNodeLabel() {
                this.nodeMethods.changeNodeLabel(this.nodeLabel);
            },
            deleteNode() {
                this.nodeMethods.deleteNode();
            }
        }
    };
</script>

<style scoped>
    @import "../../assets/styles/homePage.css";
    @import "../../assets/styles/formStyle.css";
</style>